<template>
	<div id="PaySuccess">
		<div class="pay-suc-box">
			<x-header :left-options="{showBack:false}" class="header">
				<a slot="left" @click="common.back()"><i class="tp-icon icon-back-white"></i></a>
				<a slot="right" @click=""><i class="tp-icon mall-more"></i></a>
			</x-header>
			<div class="pay-suc-info">
				<div class="pay-state-box">
					<img src="../assets/images/icon/ic_pay_success.png" />
					<div class="pay-state-right">
						<p>支付成功！</p>
						<span>您的包裹商家已整装待发...</span>
					</div>
				</div>
				<div class="btn-box">
					<router-link to="">
						<div class="back-btn btn">返回首页</div>
					</router-link>
					<router-link to="">
						<div class="look-btn btn">查看详情</div>
					</router-link>
				</div>
			</div>
		</div>
		<!--关注公众号-->
		<div class="focus-box">
			<div class="focus-hww-box">
				<img class="hww-logo" src="../assets/images/icon/icon_logo.png" />
				<div class="hww-info">
					<p>好文玩平台</p>
					<span>更多优惠关注好文玩公众号</span>
				</div>
				<div class="focus-btn">关注</div>
			</div>
		</div>
		<!--商品推荐-->
		<div class="goods-recom">
			<div class="goods-item">
				<router-link to="">
				<img class="goods-img" src="../assets/images/home/card_bg2.png" />
				<div class="goods-info">
					<p class="goods-name">时光隧道中的剪影随影</p>
					<div class="goods-price">
						<span class="price">¥267.00</span>
						<span class="eval">94.3%好评</span>
					</div>
				</div>
				</router-link>
				
			</div>
			<div class="goods-item">
				<img class="goods-img" src="../assets/images/home/card_bg2.png" />
				
				<div class="goods-info">
					<p class="goods-name">时光隧道中的剪影随影</p>
					<div class="goods-price">
						<span class="price">¥267.00</span>
						<span class="eval">94.3%好评</span>
					</div>
				</div>
			</div>
			<div class="goods-item">
				<img class="goods-img" src="../assets/images/home/card_bg2.png" />
				<div class="goods-info">
					<p class="goods-name">时光隧道中的剪影随影</p>
					<div class="goods-price">
						<span class="price">¥267.00</span>
						<span class="eval">94.3%好评</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux';
	export default {
		data() {
			return {

			}
		},
		components: {
			XHeader,
		},
	}
</script>

<style scoped="scoped" lang="less">
	body{
		background: #F5F5F5;
	}
	#PaySuccess{
		height: 100%;
	}
	.pay-suc-box {
		height: 33%;
		background: linear-gradient(90deg, rgba(228, 59, 71, 1) 0%, rgba(227, 69, 98, 1) 100%);
	}
	
	.header {
		background: transparent !important;
	}
	/*支付成功信息*/
	
	.pay-suc-info {
		padding: 0.26rem 1.14rem 1.06rem;
		.pay-state-box {
			display: flex;
			align-items: center;
			img {
				width: 2.58rem;
				height: 2.21rem;
			}
			.pay-state-right {
				margin-left: 0.73rem;
				p {
					font-size: 0.5rem;
					color: #FFFFFF;
					margin-bottom: 0.4rem;
				}
				span {
					font-size: 0.34rem;
					color: #FFFFFF;
					opacity: 0.7;
				}
			}
		}
		.btn-box {
			margin-top: 0.4rem;
			display: flex;
			a {
				.btn {
					width: 2.56rem;
					height: 0.77rem;
					border: 1px solid #FFFFFF;
					border-radius: 0.4rem;
					text-align: center;
					line-height: 0.77rem;
					color: #FFFFFF;
				}
				.back-btn {
					margin-left: 0.6rem;
					margin-right: 1.29rem;
				}
			}
		}
	}
	/*关注公众号*/
	
	.focus-box {
		padding: 0 0.32rem;
		background: transparent;
		position: absolute;
		width: 100%;
		top: 30%;
		.focus-hww-box {
			width: 100%;
			padding: 0.4rem 0.29rem;
			background: #FFFFFF;
			border-radius: 0.26rem;
			display: flex;
			align-items: center;
			.hww-logo {
				width: 1.04rem;
				height: 1.04rem;
				margin-right: 0.13rem;
			}
			.hww-info {
				flex: 1;
				p {
					font-size: 0.34rem;
					color: #222222;
					margin-bottom: 0.16rem;
				}
				span {
					font-size: 0.32rem;
					color: #999999;
				}
			}
			.focus-btn {
				width: 1.7rem;
				height: 0.64rem;
				line-height: 0.64rem;
				border-radius: 0.33rem;
				border: 1px solid #DD2835;
				text-align: center;
				font-size: 0.34rem;
				color: #DD2835;
			}
		}
	}
	
	.goods-recom {
		margin-top: 1.6rem;
		padding: 0 0.34rem;
		display: flex;
		flex-wrap: wrap;
		.goods-item {
			width: 4.54rem;
			border-radius: 0.21rem;
			background: #FFFFFF;
			margin-bottom:0.21rem;
				margin-right: 0.21rem;
			.goods-img {
				width: 100%;
				height: 5.3rem;
			
			}
			.goods-info {
				padding: 0.26rem 0;
				.goods-name {
					font-size: 0.37rem;
					color: #222222;
					text-align: center;
					margin-bottom:0.66rem;
					}
				.goods-price{
					text-align: center;
					display: flex;
						padding: 0 0.26rem;
					.price{
					
						font-size: 0.32rem;
						color: #DD2835;
						flex: 1;
						text-align: left;
					}
					.eval{
						font-size: 0.32rem;
						color: #999999;
					}
				}
			}
			
		}
		.goods-item:nth-child(2n) {
			margin-right: 0;
		}
	}
</style>